<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>推荐图书</title>
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <link rel="icon" href="images/checkrecommend.png" type="img/x-ico" />
</head>

<body>

  <ul>
    <li><a class="active" href="Student.html">返回上一页</a></li>
    <li><a href="">推荐图书</a></li>
  </ul>
  <h1>评分较高的图书：</h1>
  <div id="t">
  <table id="table" class="mytable" border="2" bgcolor="#f0f8ff"></table>
  </div>
</body>

</html>

<style>
  body {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    /*设置字体为sans-serif*/
    background-image: url(images/library.jpg);
    background-size: 100% 100%;
    background-attachment: fixed;
    /*背景图片尺寸为覆盖cover*/
  }

  h1{
      text-align: center;
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }

  li {
    float: left;
  }

  li a,
  .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  li a:hover,
  .user:hover,
  .dropdown:hover {
    background-color: #111;
    /*鼠标移动时背景颜色*/
  }

  #t{
      padding-left:30%;
  }
  mytable {
      width: 500px;
      border: 2px;
      text-align: center;
      border-collapse: collapse;
      background-color: cornsilk;
      padding-left:20%;
  }

  .mytable tr {
      width: 100px;
      padding-left:15%;
  }

  .search input {
    float: left;
    flex: 4;
    height: 30px;
    outline: none;
    border: 1px solid white;
    box-sizing: border-box;
    padding-left: 10px;
  }

  .search button {
    float: right;
    flex: 1;
    height: 30px;
    background-color: rgb(63, 224, 245);
    color: white;
    border-style: none;
    outline: none;
  }

  .search button i {
    font-style: normal;
  }

  .search button:hover {
    font-size: 20px;
    background-color: rgb(63, 224, 245);
  }
</style>
<script>

  window.onload=function () {
      var html = "<tr><th>图书ID</th><th>图书名称</th><th>图书出版社</th><th>图书总量</th><th>已借出</th><th>图书评分</th></tr>"
      $.ajax({
        url:"http://localhost:8080/bookware/findTopGrade",
        type:"post",
        dataType:"json",
        success:function (res) {
          for (var i =0;i<res.data.length;i++){
              html = html + "<tr><td>" + res.data[i].bookWareId + "</td><td>" + res.data[i].bookName + "</td><td>"+ res.data[i].bookPublisher +
                  "</td><td>" + res.data[i].bookTotal + "</td><td>" + res.data[i].bookLending + "</td><td>" + res.data[i].bookGrade + "</td></tr>";
          }
            $("#table").html(html)
        },
        error: function (res) {
          alert("JSON数据获取失败，请联系管理员！");
        }
      })
  }


</script>